<template>
	<div class="page-table-wrap">
		<base-table-data :table-data="tableList" :config="tableConfig"></base-table-data>
		<base-pagination :page-info="pageInfo" @change="pageChange"></base-pagination>
	</div>
</template>

<script setup>
import {ref,onMounted,computed} from 'vue'
defineOptions({
	name: 'PageTable',
	inheritAttrs: true,
})
const props= defineProps({
	config:{
		type: Object,
		default(){
			return {
				tableProp:{},
				columns:[],//列属性
				actions:[]//编辑、删除、详情、导出、启用
			}
		}
	},
	tableList: {
		type: Array,
		default: []
	},
	pageInfo:{
		type: Object,
		default(){
			return {
				currentPage: 0,
				pageSize: 0,
				total: 0,
			}
		}
	}
})
const emit = defineEmits(['page-change'])
const tableConfig = ref({
	tableProp:{
		showIndex: true,//是否显示行序号
		selectionType: '',//单选 radio，多选 multiple,空
		height: 'auto',
		width: '100%',
		stripe: true,
		border: true,
		tableLayout: 'auto',
		rowKey:'id',//行数据唯一键，例如主键id
		//开启单选或者多选之后，某一行是否可选,true=可选,false不可选
		selectable:(row,index) =>{
			// console.log('selectable',row,index);
			return index%2===0;
		}
	},
	columns:[
			{prop:'date',label:'日期',width:100,minWidth:100,fixed:true,sortable:false,headerSoltName:'dateHeaderSolt'}
			,{prop:'name',label:'名字',minWidth:100,
			formatter:(row,column)=>{
				// console.log('格式化了',row,column)
				return row[column.property]+',格式化了'
				}
			}
			,{prop:'address',label:'地址',width:100,minWidth:100,fixed:false,sortable:true,soltName:"addressSolt"}
		],
	actions:[
		{label:'编辑',type:'default',click:(row,index)=>{alert('打开编辑页面...')}},
		{label:'删除',type:'danger',click:(row,index)=>{alert('打开删除确认弹窗...')}}
	]
})
/* const tableData = ref([])
onMounted(()=>{
	for (var i = 0; i < 2; i++) {
		tableData.value.push({id:i,date: '2016-05-03',name: 'Tom'+i,address: 'No. 189,',})
	}
}) */
const pageChange = (pageInfo) => {
	emit('page-change',pageInfo)
}
</script>

<style>
</style>